<template>
  <div>
<van-nav-bar
  title="商品详情"
  left-text="返回"
  fixed
  left-arrow
  @click-left="onClickLeft"
/>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(items,index) in imgs" :key="index"><img :src="items" alt=""></van-swipe-item>
</van-swipe>
<div class="Details-connent" >
  <div class="top"><h3>{{items.name}}</h3></div>
  <div class="Details-con">
    <div class="Details-pic">
      <p class="pic-price">￥{{ items.price}}</p>
      <p class="pic-agoprice">￥{{ items.agoprice}}</p>
    </div>
    <div class="Details-buynum">
     <p>已售{{ items.buynum}}件</p>
    </div>
  </div>
    <div class="Rune" v-html="detailinfo"></div>
</div>
<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服"  />
  <van-goods-action-icon icon="cart-o" to="/cart" text="购物车" :badge="count" />
  <van-goods-action-icon icon="shop-o" text="店铺"  />
  <van-goods-action-button type="warning" text="加入购物车" @click="onClickCart(0)"/>
  <van-goods-action-button type="danger" text="立即购买" @click="onClickBuy(1)"/>
</van-goods-action>
<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" closeable >
  <van-card
  :num="value"
  :price="items.price"
  :title="items.name"
  :thumb="imgs[0]"
>
  </van-card>
  <van-stepper v-model="value" />
  <van-button type="primary" @click="insert_cart(items)" size="large" v-if="num===0">添加</van-button>
  <van-button type="primary" v-else @click="$router.push('/order')" size="large" >购买</van-button>
</van-popup>
  </div>
</template>

<script>
import { fetchDetails } from '@api'
import { mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      id: this.$route.query.id,
      items: [],
      imgs: [],
      detailinfo: [],
      show: false,
      value: 1,
      list: [],
      num: 0
    }
  },
  computed: {
    ...mapGetters([
      'count'
    ])
  },
  created () {
    this.fetchDetails()
  },
  methods: {
    ...mapActions([
      'insert_cart'
    ]),
    onClickCart (num) {
      this.num = num
      this.show = true
    },
    onClickBuy (num) {
      this.num = num
      this.show = true
    },
    onClickLeft () {
      history.go(-1)
    },
    fetchDetails () {
      fetchDetails({ id: this.id }).then(res => {
        if (res.data.code === 200) {
          this.items = res.data.data
          this.imgs = res.data.data.imgs.split('||')
          this.detailinfo = res.data.data.detailinfo
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-swipe{
  height: 300px;
}
.my-swipe img{
width: 100%;
height: 100%;
}
.Details-connent{
  padding: 0 12px;
}
.Details-con{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .Details-pic{
        display: flex;
        justify-content: space-between;
        .pic-price{
          font-size: 26px;
          color: orange;
        }
        .pic-agoprice{
          color: #ccc;
          align-self: flex-end;
          text-decoration:line-through;
          transform:translateY(-50%);

        }
    }
  }
  .Rune {
    width:100%;
   /deep/ img{
      width:100%
    }
  }
  .van-popup{
    background-color:#FAFAFA;
  }
  .van-card{
    margin-top: 20px;
  }
.van-card__footer .button{
  background-color: #ccc;
}
.van-stepper{
  margin-left:280px ;
}
</style>
